
<template>
    <div>
        <el-card class="box-card">
            <h2>签订合同</h2>
            <el-form :model="signForm" ref="signForm" :rules="rules" label-width="120px">
                <el-form-item label="合同名称：" prop="name">
                    <el-input v-model="signForm.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="客户：" prop="customer">
                    <el-input v-model="signForm.customer" readonly></el-input>
                </el-form-item>
                <el-form-item label="签订信息：" prop="signInfo">
                    <el-input v-model="signForm.signInfo" type="textarea" :rows="10"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            signForm: {
                name: this.$route.params.contractName,
                customer: '',
                signInfo: ''
            },
            rules: {
                signInfo: [{ required: true, message: '请输入签订信息', trigger: 'blur' }]
            }
        };
    },
    created() {
        const contractName = this.$route.params.contractName;
        this.fetchContractDetails(contractName);
    },
    methods: {
        fetchContractDetails(contractName) {
            this.axios.get(`/api/contract/name/${contractName}`)
                .then(response => {
                    const contract = response.data.data;
                    this.signForm.name = contract.name;
                    this.signForm.customer = contract.customer;
                })
                .catch(error => {
                    console.error('Error fetching contract details:', error);
                    this.$message.error('获取合同详情失败');
                });
        },
        submitForm() {
            this.$refs.signForm.validate((valid) => {
                if (valid) {
                    const contractName = this.$route.params.contractName;
                    this.axios.post(`/api/contract/${contractName}/sign`, {
                        signInfo: this.signForm.signInfo
                    })
                        .then(() => {
                            this.$message({
                                message: '合同签订成功',
                                type: 'success'
                            });
                            this.$router.push('/sign_contract'); // 返回签订合同列表
                        })
                        .catch(error => {
                            console.error('Error signing contract:', error);
                            this.$message.error('合同签订失败');
                        });
                } else {
                    this.$message.error('请填写签订信息');
                }
            });
        },
        resetForm() {
            this.$refs.signForm.resetFields();
        }
    }
};
</script>

<style scoped>
.box-card {
    margin: auto;
    width: 600px;
}
.el-form-item {
    margin-bottom: 20px;
}
</style>
